<template>
  <div style="display: flex;flex-direction: column;gap: 10px">
    <t-row class="card">
      <t-col v-for="(item,index) in panelList" :key="index" :span="3">
        <div class="header"><div class="title">{{item.title}}</div></div>
        <div class="header">
          <t-link  @click="toPath(item.path)" :style="{ fontSize: `36px`}" theme="primary" hover="color">{{ item.number }}</t-link>
        </div>
      </t-col>
    </t-row>

    <t-row  :gutter="[16, 16]">
      <t-col :xs="12" :xl="4">
        <t-card title="创新类别" :subtitle="currentMonth" class="dashboard-chart-card">
            <chart-view @click="(data)=>{clickToIndex(data,'innovationCategory')}" :chartOption="chartOpt" :autoResize="false"  height="326px" />
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="4">
        <t-card title="应用领域" :subtitle="currentMonth" class="dashboard-chart-card">
            <chart-view @click="(data)=>{clickToIndex(data,'applicationField')}" :chartOption="chartOpt3" :autoResize="false"  height="326px" />
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="4">
        <t-card title="成果状态" :subtitle="currentMonth" class="dashboard-chart-card">
          <chart-view @click="(data)=>{clickToIndex(data,'innovationStatus')}" :chartOption="chartOpt6" :autoResize="false"  height="326px" />
        </t-card>
      </t-col>
    </t-row>
    <t-row align="stretch" :gutter="[16, 16]">
      <t-col :xs="12" :xl="6">
        <t-card title="单位申报排名" class="dashboard-rank-card" style="height: 70vh">
          <t-table hover :data="deptRankData" :columns="deptRankColumns" rowKey="departmentId" maxHeight="55vh">
            <template #id="{ rowIndex }">
            <span :class="getRankClass(rowIndex)">
              {{ rowIndex + 1 }}
            </span>
            </template>
          </t-table>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="6">
        <t-card title="年度获奖成果" class="dashboard-rank-card" style="height: 70vh">
          <template #actions>
            <t-date-picker mode="year" @change="(val)=>{getAwardsProjectByYear(val)}" v-model="defaultYear" clearable allow-input />
          </template>
          <t-table hover :data="rewardRankData" :columns="rewardRankColumns" rowKey="innovationId" maxHeight="55vh">
            <template #id="{ rowIndex }">
            <span :class="getRankClass(rowIndex)">
              {{ rowIndex + 1 }}
            </span>
            </template>
            <template #innovationsName="{row}">
              <t-link @click="dialog.header=row.innovationsName;dialog.objId=row.innovationId;dialog.open_innovation_detail=true" hover="color" theme="primary">{{row.innovationsName}}</t-link>
            </template>
            <template #awardsLevel="{row}">
              {{row.awardsLevel | filterByDict(dict.type.wcx_awards_level)}}
            </template>
          </t-table>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="6">
        <t-card title="获奖成果(按获奖等级)" class="dashboard-rank-card">
          <template #actions>
           <t-select defaultValue="1" @change="(val)=>{getAwardsProjectByLevel(val)}" :options="dict.type.wcx_awards_level"></t-select>
          </template>
          <t-table hover :data="rewardRankData2" :columns="rewardRankColumns2" rowKey="innovationId" maxHeight="55vh">
            <template #id="{ rowIndex }">
            <span :class="getRankClass(rowIndex)">
              {{ rowIndex + 1 }}
            </span>
            </template>
            <template #innovationsName="{row}">
              <t-link @click="dialog.header=row.innovationsName;dialog.objId=row.innovationId;dialog.open_innovation_detail=true" hover="color" theme="primary">{{row.innovationsName}}</t-link>
            </template>
            <template #awardsLevel="{row}">
              {{row.awardsLevel | filterByDict(dict.type.wcx_awards_level)}}
            </template>
          </t-table>
        </t-card>
      </t-col>

    </t-row>
    <innovation-detail-dialog :header="dialog.header" :objId="dialog.objId" :visible.sync="dialog.open_innovation_detail" v-if="dialog.open_innovation_detail"></innovation-detail-dialog>
  </div>
</template>

<script lang="jsx">
import dayjs from "dayjs";
import InnovationDetailDialog from "./innovation/components/innovation-detail-dialog.vue";

export default {
  name: "home",
  dicts:['wcx_awards_level'],
  components:{
    InnovationDetailDialog
  },
  data(){
    return {

      dayjs,
      defaultYear:dayjs().add(-1,'year').year().toString(),
      resizeTime: 1,
      currentMonth:"",
      chartOpt:{},
      chartOpt2:{},
      chartOpt3:{},
      chartOpt4:{},
      chartOpt5:{},
      chartOpt6:{},
      dialog:{
        header:"",
        objId:0,
        open_innovation_detail: false,
        open_approve_list: false,
      },
      panelList:[
        // {
        //   title: '我的项目',
        //   number: '10',
        // },
        // {
        //   title: '单位关联项目',
        //   number: 527,
        // },
        // {
        //   title: '待我审批项目',
        //   number: '10',
        // },
        // {
        //   title: '我已审批项目',
        //   number: '1126',
        // },
      ],
      rewardRankData:[],
      deptRankData:[],
      rewardRankColumns:[
        // {
        //   colKey: "id",
        //   title: "排行",
        //   align: "center",
        // },
        {
          colKey: "innovationsName",
          title: "成果名称",
          align: "center",
          width: 220
        },
        {
          colKey: "deptName",
          title: "单位名称",
          align: "center",
          // ellipsis: true
        },
        {
          colKey: "leaderName",
          title: "负责人",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "awardsLevel",
          title: "获奖等级",
          align: "center",
          ellipsis: true
        },
      ],
      rewardRankData2: [],
      rewardRankColumns2:[
        {
          colKey: "year",
          title: "年度",
          align: "center",
        },
        {
          colKey: "innovationsName",
          title: "成果名称",
          align: "center",
          width: 220
        },
        {
          colKey: "deptName",
          title: "单位名称",
          align: "center",
          // ellipsis: true
        },
        {
          colKey: "leaderName",
          title: "负责人",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "awardsLevel",
          title: "获奖等级",
          align: "center",
          ellipsis: true
        },
      ],
      deptRankColumns:[
        {
          colKey: "id",
          title: "排行",
          align: "center",
        },
        {
          colKey: "deptName",
          title: "单位名称",
          align: "center",
          // ellipsis: true
        },
        {
          colKey: "innovationCount",
          title: "申报成果个数",
          align: "center",
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectCategory: '',
        projectName: '',
        projectType: '',
        subjectClassification: '',
        dateRange:[]
      },
    }
  },
  created() {
    this.getAllInnovationCategory();
    this.getAllInnovationType();
    this.getAllCount();
    this.getDeptInnovationRanking();
    this.getByInnovationStatus();
    this.getAwardsProjectByYear(this.defaultYear);
    this.getAwardsProjectByLevel('1');
  },
  methods:{
    clickToIndex(data,param){
      const query = {}
      query[param] = data.data.lableValue
      this.$router.push({
        path:'/wcx/innovation/innovation-index',
        query
      })
    },
    toPath(ptah){
      this.$router.push(ptah);
    },
    getRankClass(index) {
      return ['dashboard-rank__cell', { 'dashboard-rank__cell--top': index < 3 }];
    },
    getAwardsProjectByLevel(level){
      this.$api.wcx.home.getAwardsProjectByLevel(level).then(response=>{
        this.rewardRankData2 = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getAwardsProjectByYear(year){
      this.$api.wcx.home.getAwardsProjectByYear(year).then(response=>{
        this.rewardRankData = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByInnovationStatus(){
      this.$api.wcx.home.getByInnovationStatus(this.queryParams).then(response=>{
        const data = [];
        response.data.forEach(val=>{
          data.push({
            value:val.value,
            name:val.label,
            lableValue: val.lableValue
          })
        })
        this.chartOpt6 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getDeptInnovationRanking(){
      this.$api.wcx.home.getDeptInnovationRanking(this.queryParams).then(response=>{
        this.deptRankData = response.rows;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getAllCount(){
      Promise.all([this.$api.wcx.home.getMyInnovationCount(),this.$api.wcx.home.getMyDeptInnovationsCount(),
        this.$api.wcx.home.getMyApproveInnovationCount(),this.$api.wcx.home.getMyApprovedProjectCount()]).then(response => {
        this.panelList = [
          // {
          //   title: '我的成果',
          //   number: response[0].data.count,
          //   path: '/wcx/innovation/innovation-my',
          // },
          {
            title: '成果总数',
            number: response[1].data.count,
            path: '/wcx/innovation/innovation-index',
          },
          {
            title: '待我审批成果',
            number: response[2].data.count,
            path: '/wcx/approve/approve-my',
          },
          {
            title: '我已审批成果',
            number: response[3].data.count,
            path: '/wcx/approve/approved-my'
          },
        ]
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getAllInnovationType(){
      this.$api.wcx.home.getAllInnovationType().then(response=>{
        const data = [];
        response.data.forEach(val=>{
          data.push({
            value:val.value,
            name:val.label,
            lableValue: val.lableValue
          })
        })
        this.chartOpt3 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getAllInnovationCategory(){
      this.$api.wcx.home.getAllInnovationCategory().then(response=>{
        const data = [];
        response.data.forEach(val=>{
          data.push({
            value:val.value,
            name:val.label,
            lableValue: val.lableValue
          })
        })
        this.chartOpt = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
.card{
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-medium);
  background-color: var(--td-bg-color-container);
  padding: 10px 10px;
  .header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 10px;
    position: relative;
    .title{
      font: var(--td-font-title-medium);
      color: var(--td-text-color-primary);
      margin-right: var(--td-comp-margin-l);
      word-break: break-all;
    }
  }
}

@import '@/style/variables.less';
.dashboard-rank-card{
  height: 100%;
}
.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: @gray-color-5;
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: @brand-color;
  }
}
</style>

